<template>
	<div id="about">
		<Navigation></Navigation>
		<Banner :banner_img="require('../assets/images/about_banner.jpg')" banner_msg='水镇介绍'></Banner>
		<h2 class="line1">水镇溯源</h2>
		<div class="lin1-con">
			<ul>
				<li><a href="###">古北<br>水镇</a></li>
				<li><a href="###">司马台<br>长城</a></li>
				<li><a href="###">企业<br>介绍</a></li>
				<li><a href="###">水镇<br>美景</a></li>
			</ul>
			<img class="line1-img" src="../assets/images/error.png">
			<div class="lin1-text">
				<h2 class="fnt_18">古北水镇位于北京市密云区古北口镇坐落在司马台长城脚下</h2>
				<p>古北口自古以雄险著称，有着优越的军事地理位置，《密云县志》上描述古北口“京师北控边塞，顺天所属以松亭、古北口、居庸三关为总要，而古北为尤冲”。古北口以其独特的军事文化吸引了无数文人雅士，苏辙、刘敞、纳兰性德等文词大家在此留下了许多名文佳句，更有康熙、乾隆皇帝多次赞颂，以“地扼襟喉趋溯漠，天留锁钥枕雄关”来称颂它地势的险峻与重要。
				</p>
				<p>而今，古北水镇依托司马台遗留的历史文化，进行深度发掘，将9平方公里的度假区整体规划为“六区三谷”，分别为老营区、民国街区、水街风情区、卧龙堡民俗文化区、汤河古寨区、民宿餐饮区与后川禅谷、伊甸谷、云峰翠谷。古北水镇是集观光游览、休闲度假、商务会展、创意文化等旅游业态为一体，服务与设施一流、参与性和体验性极高的综合性特色休闲国际旅游度假目的地。度假区内拥有43万平方米精美的明清及民国风格的山地合院建筑，包含7家主题酒店、10家精品酒店、28家民宿客栈、30余家独立餐厅、50余处商铺和10多个文化展示体验区及完善的配套服务设施。
				</p>
			</div>
		</div>
		<div class="line2">
			<ul>
				<li class="fl line-all line2-lef">
					<img class="img2" src="../assets/images/scenery1.jpg" alt="">
					<div class="text">
						<span>愿景</span>
						<p>做中国最优秀的度假目的地</p>
					</div>
				</li>
				<li class="fr line-all line2-rig">
					<img class="img2" src="../assets/images/scenery2.jpg" alt="">
					<div class="text">
						<span>价值观</span>
						<p>将最大的善意释放给每一位游客<br>为每一位宾客提供亲情的体验</p>
					</div>
				</li>
				<li class="fl line2-cen">
					<img class="img3" src="../assets/images/scenery3.jpg" alt="">
					<div class="text">
						<span>人才观</span>
						<p>诚信正直、有作为、有地位</p>
					</div>
				</li>
				<li class="fl lien2-bot">
					<img class="img4" src="../assets/images/scenery4.jpg" alt="">
					<div class="text">
						<span>行为准则</span>
						<p>敬业、高效、严谨、关爱</p>
					</div>
				</li>
				<li class="fl lien2-bot space">
					<img class="img4" src="../assets/images/scenery5.jpg" alt="">
					<div class="text">
						<span>经营理念</span>
						<p>文化是最大的边际利润<br>细节是最好的口碑传播</p>
					</div>
				</li>
				<li class="fl lien2-bot space">
					<img class="img4" src="../assets/images/scenery6.jpg" alt="">
					<div class="text">
						<span>管理理念</span>
						<p>制度管人 流程管事<br>因人成事 因事练人</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="line3">
			<img src="../assets/images/about_img09.jpg">
			<div class="line3-box">
				<h2 class="fnt_36">司马台长城</h2>
				<p style="text-align: justify;">司马台段长城以险、密、奇、巧、全著称。险是指它建在刀削斧劈的山脊之上，惊险无比；“密”是指敌楼间的距离，两敌楼相距最近几十米，
					最远不过300米，平均间距仅140米；“奇”是指司马台长城山势险陡、 雄奇壮丽，且山下有鸳鸯湖（冷泉与温泉交汇而成），碧波荡漾，
					构成湖光山色的绮丽美景；“巧”体现在步步为营的障墙上，进可攻退可守；“全”是指城楼和敌楼的建筑风格形式奇特多样。</p>
			</div>
		</div>
		<div class="line4">
			<h2>景区景点</h2>
			<ul>
				<li class="fl">
					<img class="img5" src="../assets/images/about_img18.jpg">
					<div class="line4-map">景点地图</div>
				</li>
				<li class="fr">
					<img class="img5" src="../assets/images/about_img19.jpg">
					<div class="line4-map">景点故事</div>
				</li>
				<li class="fl">
					<img class="img5" src="../assets/images/about_img20.jpg">
					<div class="line4-map">景点地图</div>
				</li>
				<li class="fr">
					<img class="img5" src="../assets/images/about_img21.jpg">
					<div class="line4-map">景点故事</div>
				</li>
			</ul>
		</div>
		<div class="line5">
			<div class="line5-tit">
				<a href="###" class="on fnt_36">水镇新闻</a> &bull;
				<a href="###" class="fnt_36">水镇公告</a> &bull;
				<a href="###" class="fnt_36">媒体关注</a>
			</div>
			<div class="newp">
				<div><img class="img5" src="../assets/images/scenery7.jpg" alt=""></div>
				<a href="###" target="_blank">全国首批！榜上有名！古北水镇景区入选首批国家级夜间文旅消费集聚区！</a>
				<span class="time">2021-11-27 10:55:37</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from '../components/Banner.vue';
	import Navigation from '../components/Navigation.vue';
	export default{
		components:{Banner,Navigation},
		data(){
			return{
			}
		}
	}
</script>

<style type="text/css">
	@import url("../assets/css/public.css");
</style>
<style scoped="scoped">
	#about {
		background: #f2f2f2;
	}
	
	#about .img {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 500px;
	}
	
	#about .img1 {
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 500px;
		margin-left: -960px;
	}
	
	.introduce {
		position: absolute;
		width: 100%;
		bottom: 20%;
	}
	
	.introduce .chang {
		width: 1280px;
		margin: 0 auto;
	}
	
	.introduce .jis {
		color: white;
		width: 230px;
		font-size: 20px;
	}
	
	.introduce h1 {
		width: 100%;
		line-height: 45px;
	}
	
	.introduce h1>img {
		margin-top: 8px;
	}
	
	.introduce h1>span {
		margin-left: 13px;
	}
	
	.line1 {
		width: 1280px;
		margin: 30px auto;
		font-size: 27px;
		color: #444;
	}
	
	.lin1-con {
		overflow: hidden;
		width: 1280px;
		margin: 0 auto;
	}
	
	.lin1-con>ul {
		width: 90px;
		float: left;
	}
	
	.lin1-con>ul>li {
		padding: 12px 0;
		width: 90px;
		background-color: white;
	}
	
	.lin1-con>ul>li a {
		text-align: center;
		display: block;
		width: 55px;
		height: 45px;
		margin: 0 auto;
		color: black;
		line-height: 18px;
		padding-top: 10px;
		transition: all 0.3s;
	}
	
	.lin1-con>ul>li a:hover {
		background-color: #A19063;
		color: white;
	}
	
	.lin1-con .line1-img {
		float: left;
		width: 500px;
		margin-left: 70px;
	}
	
	.lin1-con .lin1-text {
		width: 550px;
		float: right;
		text-align: justify;
		font-size: 14px;
		line-height: 26px;
	}
	
	.lin1-con .lin1-text h2 {
		color: #A19063;
		font-size: 20px;
	}
	
	.lin1-con .lin1-text>p {
		margin-top: 15px;
	}
	
	.line2 {
		overflow: hidden;
		width: 1280px;
		margin: 30px auto;
	}
	
	.img2 {
		width: 580px;
		height: 300px;
		transition: all 1s;
	}
	
	.line2 li {
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
	}
	
	.line-all {
		width: 580px;
		height: 300px;
	}
	
	.line2 li:hover img {
		transform: scale(1.1);
	}
	
	.line2-lef {
		margin-left: 45px;
	}
	
	.line2-rig {
		margin-right: 45px;
	}
	
	.line2 li .text {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100px;
		color: white;
	}
	
	.line2 li .text span {
		margin-left: 50px;
		font-size: 30px;
	}
	
	.line2 li .text p {
		margin-left: 50px;
		margin-top: 5px;
	}
	
	.line2-cen {
		width: 1190px;
		height: 300px;
		margin-left: 45px;
	}
	
	.line2-cen .img3 {
		width: 1190px;
		transition: all 1s;
	}
	
	.lien2-bot {
		overflow: hidden;
		width: 383px;
		height: 310px;
		margin-left: 45px;
	}
	
	.space {
		margin-left: 20px;
	}
	
	.lien2-bot .img4 {
		width: 383px;
		height: 310px;
		transition: all 1s;
	}
	
	.line3 {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 600px;
	}
	
	.line3>img {
		position: absolute;
		left: 50%;
		width: 1920px;
		height: 600px;
		margin-left: -960px;
	}
	
	.line3 .line3-box {
		position: absolute;
		padding: 0 50px;
		width: 530px;
		height: 260px;
		left: 50%;
		top: 25%;
		color: white;
		margin-left: -640px;
		background-image: url(../assets/images/about_bg01.jpg);
		background-repeat: repeat;
		background-size: 610px 290px;
	}
	.line4{
		overflow: hidden;
		width: 100%;
		background-image: url(../assets/images/about_bg02.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		padding-bottom: 50px;
	}
	.line4 h2{
		margin: 100px 0 50px;
		font-size: 40px;
		text-align: center
	}
	.line4 ul{
		overflow: hidden;
		width: 1280px;
		margin: 0 auto;
	}
	.line4 ul li{
		position: relative;
		width: 620px;
		margin-top: 15px;
	}
	.line4 .img5{
		width: 640px;
		height: 350px;
	}
	.line4 .line4-map{
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 40px;
		color: white;
		font-size: 35px;
	}
	.line5{
		overflow:hidden;
		width: 1280px;
		margin: 0 auto;
		padding-bottom: 50px;
	}
	.line5 .line5-tit{
		text-align: center;
		font-size: 35px;
		margin: 80px 0 50px;
	}
	.line5 .line5-tit>a{
		color: black;
	}
	.line5 .img5{
		width: 375px;
		height: 195px;
		transition: all 1s;
	}
	.line5 .newp{
		width: 375px;
	}
	.line5 .newp>div{
		overflow: hidden;
		width: 375px;
		height: 195px;
	}
	.line5 .newp>div:hover img{
		transform: scale(1.1);
	}
	.newp>a{
		width: 375px;
		display: inline-block;
		color: #A19063;
		margin: 20px 0 5px;
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.newp .time{
		display: inline-block;
		color: #999;
	}
	
</style>
